<template>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>药品管理</el-breadcrumb-item>
        <el-breadcrumb-item>药品管理</el-breadcrumb-item>
      </el-breadcrumb>
      <br><br>
      <el-form :inline="true" :model="drugForm" class="demo-form-inline">
        <el-form-item label="药品名称">
          <el-input v-model="drugForm.drugName" placeholder="药品名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button type="primary" @click="add">新增</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData.list" style="width: 100%">
        <el-table-column prop="drugId" label="编号" width="50"></el-table-column>
        <el-table-column prop="drugName" label="药品名称" width="150"></el-table-column>
        <el-table-column prop="drugType" label="药品种类" width="150"></el-table-column>
        <el-table-column prop="drugQuantity" label="药品数量" width="150"></el-table-column>
        <el-table-column prop="drugPrice" label="药品单价" width="150"></el-table-column>
        <el-table-column prop="storageTime" label="入库时间" width="150"></el-table-column>
        <el-table-column prop="expirationTime" label="过期时间" width="150"></el-table-column>
        <el-table-column prop="drugDescription" label="药品功能描述" width="150"></el-table-column>
        <el-table-column label="操作">
          <!--slot-scope：定义插槽，用来获取循环列表的迭代变量-->
          <!--迭代变量：scope.row-->
          <!--迭代变量索引：scope.$index-->
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="EditModl(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="DeleteModel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页插件-->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableData.currentPage"
          :page-sizes="[5, 10, 15]"
          :page-size="tableData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total">
        </el-pagination>
      </div>
      <!--新增对话框-->
      <!--visible.sync 是否显示对话框 -->
      <el-dialog
        title="药品新增"
        :visible.sync="dialogVisible"
        width="50%">

        <el-form ref="form" :model="drugForm" label-width="80px">
          <el-form-item label="药品名称">
            <!-- el-input  文本框-->
            <el-input v-model="drugForm.drugName"></el-input>
          </el-form-item>

          <el-form-item label="药品种类">
            <el-select v-model="drugForm.drugType" placeholder="药品种类">
              <el-option label="中药" value="中药"></el-option>
              <el-option label="西药" value="西药"></el-option>
              <el-option label="生物药剂" value="生物药剂"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="药品数量">
            <el-input v-model="drugForm.drugQuantity"></el-input>
          </el-form-item>
          <el-form-item label="药品价格">
            <el-input v-model="drugForm.drugPrice"></el-input>
          </el-form-item>
          <el-form-item label="入库时间">
            <el-date-picker v-model="drugForm.storageTime" type="date" placeholder="选择入库时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="过期时间">
            <el-date-picker v-model="drugForm.expirationTime" type="date" placeholder="选择过期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="功能描述">
          <el-input type="textarea" v-model="drugForm.drugDescription"></el-input>
        </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
         </span>
      </el-dialog>
    </div>

</template>

<script>
import DrugEdit from "./DrugEdit";
    export default {
        name: "Drug",

        data(){
          return{
             dialogVisible:false,//控制对话框是否显示
            // 查询参数
            search: {
              keyWord:"",
              currentPage:1,
              pageSize:5,
              sort:"drugId",
              direction:"desc"
            },
            drugForm:{
              drugId:"",
              drugName:"",
              drugType:"",
              drugQuantity:"",
              drugPrice:"",
              storageTime:"",
              expirationTime:"",
              drugDescription:"",
            },//药品表单对象
            tableData:{
              total:0,//总条数
              totalPage:0,//总页数
              currentPage:1,// 当前页
              pageSize:5,// 页长
              list:[],// 当前页数据集合
            },
          }
        },
        methods:{
            loadData(){//加载药品列表
                var self = this;
                //发送ajax请求
              if (self.drugForm.drugName!=null){
                self.search.keyWord=self.drugForm.drugName;
              }
              this.$Request.fetch_("/api/drugManager/drugs","post",this.search)
              .then((rs)=>{
                // console.log(rs);
                self.tableData.list=rs.records;
                self.tableData.total = rs.total;
                self.tableData.totalPage = rs.totalPage;
                if (self.drugForm.drugName!=null){
                  self.search.keyWord=self.drugForm.drugName;
                }
              }).catch((error)=>{
                this.$message.error(error);
              });
            },
          EditModl(i,row){//编辑，跳转页面
              console.log(row);
              //跳转到修改页面，并把选中行的数据传过去
              this.$router.push({"name":"DrugEdit",query:row});
          },
          DeleteModel(i,row){
            this.$confirm("确定要删除当前行吗？", "删除", {
              comfirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            });
            var self = this;
            this.$Request.fetch_("/api/drugManager/drug/"+row.drugId,"delete",row)
            .then(function (rs) {
              if (rs) {
                //刷新
                self.loadData();
              } else {
                self.$message(rs.data.msg);
              }
            })
            // this.$http.delete("/api/drugManager//drug/"+row.drugId,this.$qs.stringify(row))
            //   .then(function (rs) {
            //     if (rs.data.code==200) {
            //       //刷新
            //       self.loadData();
            //     } else {
            //       self.$message(rs.data.msg);
            //     }
            //   })
          },
          add(){//新增，打开对话框
              //清空表单数据
              this.drugForm={};
              this.dialogVisible = true;
          },
          save(){//保存
            var self = this;
            console.log(this.drugForm);
            //ajax提交
            this.$Request.fetch_("/api/drugManager/drug/add","post",this.drugForm)
              .then(function (rs) {
                self.$message(rs);
                if(rs){
                  //关闭弹窗
                  self.dialogVisible = false;
                  //刷新
                  self.loadData();
                }else{
                  self.$message(rs.data.msg);
                }
              });
            // this.$http.post("/api/drugManager/drug/add",this.$qs.stringify(this.drugForm))
            //   .then(function (rs) {
            //     self.$message(rs.data.msg);
            //     if(rs.data.code==200){
            //       //关闭弹窗
            //       self.dialogVisible = false;
            //       //刷新
            //       self.loadData();
            //     }else{
            //       self.$message(rs.data.msg);
            //     }
            //   })
          },
          handleSizeChange(row){ //下来框触发的事件
                console.log(row);
                //更改当前查询的每页显示条数
                this.search.pageSize= row;
              //刷新
              this.loadData();
          },
          handleCurrentChange(v){ //页码触发的事件
              //更改当期查询的页码
             this.search.currentPage=v;
            //刷新
             this.loadData();
          }
        },
        created() {
            this.loadData();
        }

    }
</script>

<style scoped>

</style>
